<template>
	<view class="new-users copy-data" :style="{height:pageHeight}">
		<view class="mid" style="flex:1;overflow: hidden;">
			<view class="bg">
				<!-- #ifdef APP-PLUS -->
				<view @click="scanQRCode" style="position: absolute;top:  119rpx;right: 10px;z-index: 99;">
					<image style="width: 40px;height: 40px;" src="/static/images/sys_o.png"></image>
				</view>
				<!-- #endif -->
			</view>
			<view class="head pad30">
				<view class="info">
					<view class="info-top">
						<view class="info-left" @click="userInfoEditClick">
							<image class="avatar" :src='userInfo.avatar' v-if="userInfo.avatar && uid"
								@click="goEdit()"></image>
							<image v-else class="avatar" src="/static/images/user.png" mode="" @click="goEdit()" />
							<view class="info-name">
								<view class="name">
									{{ userInfo.nickname }}
								</view>
								<view class="txt">
									{{userInfo.phone}}
								</view>
							</view>
						</view>
						<view class="info-right">
							{{userInfo.level?`会员等级V${userInfo.level}`:'初级会员'}}

						</view>
					</view>
					<view class="info-footer">
						<view class="desc">
							<view class="prince">
								{{userInfo.score || 0}}
							</view>
							<view class="txt">
								现有通证
							</view>
						</view>
						<view class="desc">
							<view class="prince">
								{{totalSbp}}
							</view>
							<view class="txt">
								总通证
							</view>
						</view>
					</view>

				</view>
				<!-- list -->
				<view class="list-card">
					<block v-for="(item,index) in listMenu" :key="index">
						<navigator class="list-item" hover-class="none" :url="item.url">
							<view class="left">
								<view class="txt">{{item.title}}</view>
							</view>
							<image class="right" src="/static/images/right.png" mode="" />
						</navigator>
					</block>
				</view>
			</view>

		</view>
		<wu-app-update></wu-app-update>
	</view>
</template>
<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import Cache from '@/utils/cache';
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		getMenuList
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5
	import Auth from '@/libs/wechat';
	// #endif
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	const app = getApp();
	export default {
		components: {
			// #ifdef MP
			authorize
			// #endif
		},
		computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid','totalSbp']),
		data() {
			return {
				listMenu: [{
						title: '快捷交易',
						url: '/pages/trad_market_sell_1_1/trad_market_sell_1_1',
					},
					{
						title: '收款信息',
						url: '/pages/coll_info/coll_info',
					},
					{
						title: '交易记录',
						url: '/pages/trade_record/trade_record',
					},
					{
						title: '客服中心',
						url: '/pages/center_service/center_service',
					},
					{
						title: '设置',
						url: '/pages/setting/setting',
					},
				],
				imgUrls: [],
				userMenu: [],
				autoplay: true,
				circular: true,
				interval: 3000,
				duration: 500,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				orderStatusNum: {},
				MyMenus: [],
				wechatUrl: [],
				servicePic: '/static/images/customer.png',
				sysHeight: sysHeight,
				pageHeight: '100%',
				// #ifdef H5
				pageHeight: app.globalData.windowHeight,
				// #endif
				// #ifdef H5
				isWeixin: Auth.isWeixin()
				//#endif
			}
		},
		onLoad() {
			let that = this;
			// #ifdef H5
			that.$set(that, 'pageHeight', app.globalData.windowHeight);
			// #endif
			that.$set(that, 'MyMenus', app.globalData.MyMenus);
			if (that.isLogin == false) {
				// #ifdef H5
				toLogin()
				// #endif
			}
		},
		onShow: function() {
			console.log(this.$Cache.get(BACK_URL))
			let that = this;
			// #ifdef H5
			uni.getSystemInfo({
				success: function(res) {
					that.$set(that, 'pageHeight', res.windowHeight + 'px');
				}
			});
			// #endif

			if (that.isLogin) {
				// this.$store.dispatch('USERINFO');
			} else {
				uni.navigateTo({
					url: '/pages/users/login/index'
				})

				// toLogin();
			}
		},
		methods: {
			scanQRCode() {
				uni.scanCode({
					success: (res) => {
						console.log('扫描结果：' + res.result);
						let resu = decodeURIComponent(res.result)
						let results = JSON.parse(resu)
						let type = results.type
						let invite_code = results.invite_code
						let money = results.money
						console.log(money)
						if (type == 1) {
							uni.navigateTo({
								url: "/pages/users/myProperty/pay?invite_code=" + invite_code +
									"&money=" + money
							})
						}
					},
					fail: (err) => {
						console.error('扫描失败：' + err);
						// uni.showToast({
						// 	title: '',
						// 	icon: 'none'
						// });
					}
				});
			},

			userInfoEditClick() {

			},
			Setting: function() {
				uni.openSetting({
					success: function(res) {
						console.log(res.authSetting)
					}
				});
			},
			// 编辑页面
			goEdit() {
				if (this.isLogin == false) {
					// toLogin();
				} else {
					uni.navigateTo({
						url: '/pages/users/user_info/index'
					})
				}
			},
		}
	}
</script>


<style lang="scss" scoped>
	page,
	body {
		height: 100%;
	}

	.bg {
		width: 100%;
		height: 380rpx;
		background-image: url('~@/static/images/user_bg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.contenBox {
		padding: 0 30rpx;
	}

	.support {
		width: 219rpx;
		height: 74rpx;
		margin: 54rpx auto;
		display: block;
	}

	.new-users {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.head {
		.info {
			transform: translateY(-50%);
			background: white;
			box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;

			.info-top {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-left {
					display: flex;
					align-items: center;

					.avatar {
						height: 100rpx;
						width: 100rpx;
						border-radius: 50px;
					}

					.info-name {
						margin-left: 18rpx;

						.name {
							font-size: 34rpx;
							color: #333333;
							margin-bottom: 15rpx;
						}

						.txt {
							font-size: 28rpx;
							color: #999999;
						}
					}

				}

				.info-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 174rpx;
					height: 60rpx;
					text-align: center;
					background: linear-gradient(to right, #FCCC9B, #AE7741);
					border-radius: 50px;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}

			.info-footer {
				background: #FAFAFA;
				display: flex;
				align-items: center;
				padding: 15rpx 60rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				.desc {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 50%;
					text-align: right;

				}


				.prince {
					font-size: 28rpx;
					color: #A8853A;
				}

				.txt {
					font-size: 24rpx;
					color: #666666;
					margin-top: 10rpx;
				}
			}

			.desc:first-child {
				text-align: left;
				border-right: 1px solid rgba(234, 234, 234, 0.39);
			}
		}

		.list-card {
			width: 100%;
			transform: translateY(-125rpx);

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 90rpx;
				width: 100%;
				padding: 20rpx 25rpx;
				background-color: #fff;
				margin-top: 20rpx;
				font-size: 32rpx;

				.left {
					display: flex;
					align-items: center;
					flex: 1;

					.image {
						width: 20px;
						height: 20px;
						margin-right: 20rpx;
					}
				}

				.right {
					width: 17rpx;
					height: 31rpx;
				}
			}

		}

	}
</style>